@import 'variables';

:host {
  .tracks-list {
    .header {
      display: flex;
      white-space: nowrap;

      app-sort-tracks {
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;
        margin-right: 5px;
      }
      .filter {
        align-self: flex-end;
        transition: color 0.5s ease;

        &:hover {
          color: $brand-primary;
        }
      }
    }

    &::-webkit-scrollbar {
      display: none;
    }

    /deep/ app-filter-form {
      .search-filter {
        background: #f5f5f5;
        margin-left: -18px;
        width: calc(100% + 34px);
        margin-top: 10px;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2) inset;
      }

      .new-filter {
        background: transparent;
      }
    }

  }

  @media (max-width: $screen-md-min) {
    .tracks-list {
      box-shadow: none;
      border-radius: 0;
    }
  }
}
